<style lang="css">

.unit {
    position: absolute;
}
.dragIng .gezi{
  background: #789;
}

</style>

<template lang="html">

<div class="unit" @mousedown='mousedown($event,$el)' :class="{map:isMap,dragIng:dragIng}" :style="{top:top+'px',left:left+'px',height:piecesArr.length*$store.state.baseWidth+'px'}">
    <lRow :width="piecesWidth" inline=true :style="{flexWrap:'wrap'}">
        <lCol v-for="(_item,_index) in piecesArr" width="100%" :height="$store.state.baseWidth+'px'">
            <lRow class="" width="100%">
                <Gezi class="" v-for="(__item,__index) in _item" :init-value="__item==='X'?1:0" :class="{geziOk:__item==='.'||__item==='0' ,gezi:__item==='X'||Number(__item)>0}" width="100%" :height="$store.state.baseWidth+'px'" :style="{textAlign:'center',lineHeight:$store.state.baseWidth+'px'}">
                    {{__item|geziValue}}
                </Gezi>
            </lRow>
        </lCol>
    </lRow>
</div>

</template>

<script>

import $ from 'jquery'
import lRow from './row.vue'
import lCol from './col.vue'
import Gezi from './gezi.vue'

import {
    mapGetters, mapActions, mapMutations
}
from 'vuex'
export default {
    name: 'pieces',
    props: {
        piecesArr: {
            type: Array,
            default: []
        },
        piecesWidth: {
            type: String
        },
        isMap: {
            default: false
        },
    },
    data() {
        return {
          dragIng:false,
          init_over:false,
          left_: {
              default: 0
          },
          top_: {
              default: 0
          },
          left__: {
              default: 0
          },
          top__: {
              default: 0
          },
        }
    },
    computed: {
      left:function(){
        if(this.init_over){
          if(this.dragIng){
            this.left__=this.left_ + (this.$store.state.drag.newX-this.$store.state.drag.oldX);
        }
      }else {
          this.left__=this.left_;
        }
        return this.left__;
    },
      top:function(){
        let top=0;
        if(this.init_over){
          if(this.dragIng){
            top=this.top_ + (this.$store.state.drag.newY-this.$store.state.drag.oldY);
            this.top__=top;
          }else {
            top=this.top__;
          }
        }else {
          top=this.top_;
        }
        return top;
      }
    },
    mounted() {
        this.init();
        window.pieces=this;
        // console.info(this.left);
        // console.info($(this.$el).width(),'---------');
        // this.$store.commit('leftAdd',$(this.$el).width());
        // this.$state.commit('leftAdd');
        // console.info(this.piecesArr);
    },
    attached() {

    },
    methods: {
      mousedown:function(event,b){
        if(this.isMap) return;
        this.left_=this.left;
        this.top_=this.top;
        // console.info(this);
        this.init_over=true;
        this.dragIng=true;
        this.$once('dragStop',function(){
          this.dragIng=false;

          let nl=parseInt(this.left__/this.$store.state.baseWidth);
          this.left__=nl*this.$store.state.baseWidth;

          let nt=parseInt(this.top__/this.$store.state.baseWidth);
          this.top__=nt*this.$store.state.baseWidth;

          console.info(this.left,'----',this.top);
        });
        this.$store.commit('dragStart',{event:event,target:this});
      },
        init: function() {
          this.$store.commit('getPiecesPosition', {
              piecesWidth: this.piecesWidth,
              piecesArr: this.piecesArr
          });

            if (this.isMap) {
                this.left_ = this.$store.state.baseWidth;
                this.top_ = this.$store.state.baseWidth;
            } else {
                this.left_ = this.$store.state.piecesPosition.left;
                this.top_ = this.$store.state.piecesPosition.top;
            }

            this.$store.commit('setPiecesPosition', {
                piecesWidth: this.piecesWidth,
                piecesArr: this.piecesArr
            });

        }
    },
    components: {
        lRow,
        lCol,
        Gezi
    }
}

</script>
